<template>
  <div class="yl-chat-input box flex-center">
    <div class="__inpt">
      <input
        type="text"
        :value="inptxt"
        @input="inputload"
        @keyup.enter="send"
        :placeholder="placeholder"
      />
      <van-uploader
        class="upload-btn"
        :show-upload="false"
        name="file"
        :action="config.uploadUrl + '/upload'"
        :after-read="afterRead"
        :max-size="800 * 1024"
        @oversize="onOversize"
      >
        <i class="send-img yl-icon yl-icon-image_title" />
        <!-- <p class="send-img"><van-icon  class-prefix="yl-icon" name="image_title" /></p> -->
      </van-uploader>
      <div class="send-img" @click="$emit('onSendMedHistory')">
        <i class="send-img yl-icon yl-icon-dingdan2 text-blod" />
        <!-- <van-icon class="text-blod" class-prefix="yl-icon" name="dingdan2" /> -->
      </div>
    </div>

    <!-- <div class="__btn _add flex-d-column flex-center">
      <van-icon class-prefix="yl-icon" name="image_title" />
    </div> -->
    <!-- <div class="__btn _add flex-d-column flex-center">
      <van-icon class-prefix="yl-icon" name="fabu" />
    </div> -->
    <!-- <van-popover class="__btn _add flex-center" v-model="showPopover" placement="top-end" trigger="click"
      :actions="actions">
      <template #reference>
        <div class="flex-d-column flex-center">
          <van-icon class-prefix="yl-icon" name="plus" />
        </div>
      </template>
    </van-popover> -->

    <div class="__btn box-round flex-d-column flex-center" @click="send">
      <van-icon
        class-prefix="yl-icon"
        name="fabu"
        color="var(--color-light-text)"
      />
    </div>
  </div>
</template>

<script>
import config from "@/utils/config";
export default {
  name: "ylChatInput",
  props: {
    placeholder: {
      type: String,
      default: "请输入消息...",
    },
  },
  data() {
    return {
      config,
      inptxt: "",
    };
  },
  methods: {
    inputload(e) {
      this.inptxt = e.target.value;
      this.$emit("input", e.target.value);
    },
    send() {
      this.$emit("send", this.inptxt);
      this.inptxt = "";
    },
    // 发送图片
    afterRead(file) {
      this.$api.upload.upload(file).then((res) => {
        // console.log(res);
        this.$emit("onSendImg", res);
      });
    },
    onOversize(file) {
      this.$ylToast({
        type: "error",
        msg: "文件大小不能超过 800kb",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.yl-chat-input {
  // position: sticky;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 14px 10px;
  width: 100%;
  border-top-right-radius: var(--border-radius-larger);
  border-top-left-radius: var(--border-radius-larger);
  box-shadow: var(--box-shadow);

  .__inpt {
    position: relative;
    line-height: 1.5rem;
    caret-color: var(--color-main);
    flex: 1;
    display: flex;
    align-items: center;
    // font-size: large;
    // padding: 10px;
    // border: none;
    border: 2px solid var(--color-main);
    border-radius: var(--border-radius-small);
    // box-shadow: var(--box-shadow);

    .send-img {
      display: block;
      background: #fff;
      color: var(--color-main);
      // position: absolute;
      // right: 3px;
      // top: 50%;
      // transform: translateY(-60%);
      padding: 6px;
      >i{
        font-weight: bolder;
        font-size: large;
      }
    }

    > input {
      flex: 1;
      padding: 6px;
      width: 100%;
      border: none;
      // border-radius: var(--border-radius-small);
    }
  }

  .__btn {
    flex-grow: 0;
    min-width: 10vw;
    margin-left: 10px;
    background: var(--color-main);
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow);

    &._add {
      color: var(--color-main);
      min-width: 6vw;
      background: transparent;
      box-shadow: none;
      font-size: 8vw;
    }
  }

  .upload-btn {
    .send-img {
      font-weight: lighter !important;
       font-size: large;
    }
  }
}
</style>